<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>OpenLayers Google Layer Example</title>
        <link rel="stylesheet" href="lib/openlayers/theme/default/style.css" type="text/css" />
        <link rel="stylesheet" href="lib/openlayers/theme/default/google.css" type="text/css" />
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <!-- this gmaps key generated for http://openlayers.org/dev/ -->
        <script type="text/javascript" src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'>
        </script>
<!--        <script type="text/javascript" src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'>
        </script>
        <script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers">
        </script> -->
        <script type="text/javascript" src="lib/openlayers/OpenLayers.js">
        </script>
        <script type="text/javascript">
            var map;
            
            function init(){
                var gmap = new GMap2(document.getElementById("map_canvas"));
//                var directionsPanel = document.getElementById("route");
                var directions = new GDirections(gmap);
                
                map = new OpenLayers.Map('map', {
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    displayProjection: new OpenLayers.Projection("EPSG:4326"),
                    units: "m",
                    maxResolution: 156543.0339,
                    maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
                });
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                
                var googleLayer = new OpenLayers.Layer.Google("Google Streets", // the default
                {
                    numZoomLevels: 20,
                    sphericalMercator: true
                });
     /*           yahooLayer = new OpenLayers.Layer.Yahoo("Yahoo");
                bingLayer = new OpenLayers.Layer.VirtualEarth("Bing", {
                    minZoomLevel: 4,
                    maxZoomLevel: 6,
                    'type': VEMapStyle.Aerial
                });*/
                var vectorLayer = new OpenLayers.Layer.Vector("Route");
                
                map.addLayers([googleLayer, vectorLayer]);
                
                
                // create a line feature from a list of points
                GEvent.addListener(directions, "load", function(){
                    var pointList = [];
                    var line = directions.getPolyline();
                    for (var p = 0; p < line.getVertexCount(); p++) {
                        var point = line.getVertex(p);
                        var newPoint = new OpenLayers.Geometry.Point(point.lng(), point.lat());
                        pointList.push(newPoint.transform(map.displayProjection, map.projection));
                    }
                    var lineFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList), null, {
                        strokeColor: "#0000FF",
                        strokeWidth: 3,
                        pointRadius: 6,
                        pointerEvents: "visiblePainted"
                    });
	                vectorLayer.addFeatures([lineFeature]);
                });
                
                map.setCenter(new OpenLayers.LonLat(13, 52).transform(map.displayProjection, map.projection), 5);
                directions.load("from: Berlin, Germany to: Frankfurt, Germany");
            }
        </script>
    </head>
    <body onload="init();">
        <h1 id="title">PMfAPIC (PM friendly API comparison)</h1>
        <div id="tags">
        </div>
        <div id="map" class="smallmap" style="float: left;">
        </div>
        <div id="map_canvas" class="smallmap" style="float: right;">
        </div>
    </body>
</html>
